<template>
  <view class="page-search">
    <view class="search">
      <view class="search-icon">
        <image class="search-icon-logout" src="/static/icon/icon-search.svg"></image>
      </view>
      <view class="search-input">
        <input v-model="searchObj[searchData.prop]" :placeholder="searchData.placeholder"
               class="search-input-logout" placeholder-class="placeholder-input" @input="handleInput"/>
      </view>
      <view v-if="searchData.sweep" class="search-icon">
        <image class="search-icon-logout" src="/static/icon/icon-sweep.svg"></image>
      </view>
    </view>
    <view v-if="searchData.filter" class="filter">
      <view class="filter-icon">
        <image class="filter-icon-logout" src="/static/icon/icon-filter.svg"></image>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 主页面 - 搜索
 */
export default {
  name: "page-search"
}
</script>

<script setup>
import {
  ref
} from 'vue'

/**
 * 定义emit
 */
const emit = defineEmits(['input'])

/**
 * props传入
 */
const props = defineProps({
  searchData: {}
})

/**
 * 接收基础数据
 */
const searchData = ref(props.searchData)

/**
 * 接收映射数据
 */
const searchObj = ref({})

/**
 * 监听输入
 */
const handleInput = (e) => {
  searchObj.value[searchData.value.prop] = e.detail.value
  emit('input', searchObj.value)
}

/**
 * 初始化数据
 */
const initData = () => {
  if (searchData.value.initData) {
    searchObj.value[searchData.value.prop] = searchData.value.initData
  }
}

initData()
</script>

<style lang="scss" scoped src="./index.scss">

</style>